<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>色彩随机生成工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
    <style>
        .color-block {
            width: 100%;
            height: 150px;
            cursor: pointer;
        }

        .color-value {
            font-size: 14px;
            font-weight: bold;
        }

        .bg-random {
            background-color: #000;
        }

        /* 默认色值 */
        #colorBlock1 {
            background-color: #E74C3C;
        }

        #colorBlock2 {
            background-color: #3498DB;
        }

        #colorBlock3 {
            background-color: #27AE60;
        }

        #colorBlock4 {
            background-color: #F1C40F;
        }
    </style>
</head>

<body>
    <div class="container my-5">
        <h1 class="mb-4">色彩随机生成工具</h1>
        <div class="row">
            <div class="col-md-6 col-lg-3 mb-3">
                <div id="colorBlock1" class="color-block bg-random" onclick="copyColorValue(1)"></div>
                <p><span id="colorValue1" class="color-value">#</span></p>
            </div>
            <div class="col-md-6 col-lg-3 mb-3">
                <div id="colorBlock2" class="color-block bg-random" onclick="copyColorValue(2)"></div>
                <p><span id="colorValue2" class="color-value">#</span></p>
            </div>
            <div class="col-md-6 col-lg-3 mb-3">
                <div id="colorBlock3" class="color-block bg-random" onclick="copyColorValue(3)"></div>
                <p><span id="colorValue3" class="color-value">#</span></p>
            </div>
            <div class="col-md-6 col-lg-3 mb-3">
                <div id="colorBlock4" class="color-block bg-random" onclick="copyColorValue(4)"></div>
                <p><span id="colorValue4" class="color-value">#</span></p>
            </div>
        </div>
        <button type="button" class="btn btn-primary" onclick="generateColors()">生成</button>
    </div>
    <script>
        function generateColors() {
            // 生成4个颜色
            const colors = [];
            for (let i = 0; i < 4; i++) {
                const r = Math.floor(Math.random() * 256);
                const g = Math.floor(Math.random() * 256);
                const b = Math.floor(Math.random() * 256);
                const color = rgbToHex(r, g, b);
                colors.push(color);
            }

            // 更新页面显示的颜色块和颜色值
            document.getElementById("colorBlock1").style.backgroundColor = colors[0];
            document.getElementById("colorValue1").innerHTML = colors[0];

            document.getElementById("colorBlock2").style.backgroundColor = colors[1];
            document.getElementById("colorValue2").innerHTML = colors[1];

            document.getElementById("colorBlock3").style.backgroundColor = colors[2];
            document.getElementById("colorValue3").innerHTML = colors[2];

            document.getElementById("colorBlock4").style.backgroundColor = colors[3];
            document.getElementById("colorValue4").innerHTML = colors[3];
        }

        function rgbToHex(r, g, b) {
            const hexR = r.toString(16).padStart(2, '0');
            const hexG = g.toString(16).padStart(2, '0');
            const hexB = b.toString(16).padStart(2, '0');
            return "#" + hexR + hexG + hexB;
        }

        function copyColorValue(colorIndex) {
            // 获取对应颜色值的元素
            const colorValueElement = document.getElementById(`colorValue${colorIndex}`);

            // 复制颜色值到剪贴板
            const colorValue = colorValueElement.innerHTML;
            navigator.clipboard.writeText(colorValue);
        }
    </script>
</body>

</html>